<!-- 直接费用 -->
<template>
  <div class="module_">
    <div class="flex-space-between mb8 search_box">
      <el-form :inline="true" :model="pageparm" class="user-search">
        <el-form-item label="选择一级科室筛选：">
          <el-select v-model="pageparm.department_id" clearable filterable placeholder="请选择" @change='onchange'>
            <el-option
              v-for="item in cacheDepartments"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="tableData"
      class="flex-1"
      height="150"
      size="small"
      border
      highlight-current-row
      v-loading="tableLoading"
      @sort-change="tableSortChange"
      stripe
    >
      <el-table-column
        align="center"
        prop="department.name"
        label="科室"
        width="150"
        show-overflow-tooltip
        fixed
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="date"
        label="日期"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="base_salary"
        label="基本工资"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="social_security"
        label="五险一金"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="loabor_dispatch"
        label="劳动派遣人员经费"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="canteen"
        label="食堂费"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="house_fee"
        label="房屋使用费"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="device_depreciation"
        label="设备折旧费"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="property_management"
        label="物业管理费"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="device_maintenance"
        label="设备维护费"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="sewage_disposal"
        label="污水处理费"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="sanitary_material"
        label="非计价卫生材料"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="affairs_material"
        label="总务材料"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="disinfect"
        label="消毒费"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="laundry"
        label="洗涤费"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="utilities"
        label="水电气费"
        width="150"
        sortable="custom"
        show-overflow-tooltip
      >
      </el-table-column>
    </el-table>

    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
  </div>
</template>

<script>
import {Apidirectcost} from '@/api'
import { debounce } from "@/utils";
import { mapState,mapActions} from 'vuex'
export default {
  computed:{
    ...mapState(['cacheDepartments'])
  },
  data() {
    return {
      tableData: [],
      pageparm: {
        page: 1,
        perPage: 20,
        total: null,
        sort_str: "updated_at",
        sort_order: "desc",
        department_id: null
      },
      tableLoading: false,
    };
  },
  mounted() {
    this.getList()

  },
  methods: {
    onchange(){
      this.pageparm.department_id = this.pageparm.department_id || null
      this.pageparm.page = 1;
      this.getList()
    },
    tableSortChange(column) {
      if (column.order === "descending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "desc";
      } else if (column.order === "ascending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "asc";
      }else{
        this.pageparm.sort_str = null;
        this.pageparm.sort_order = null;
      }
      this.getList();
    },

    //分页
    callFather(pageparm) {
      this.pageparm.page = pageparm.page;
      this.pageparm.perPage = pageparm.perPage;
      this.getList();
    },
    getList() {
      this.tableLoading = true;
      Apidirectcost(this.pageparm)
        .then(({ data, page }) => {
          this.tableData = data || [];
          this.pageparm.total = page.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
  },
};
</script>

<style lang='less' scoped>

</style>